import React from "react"
import { Layout, Space, Popconfirm, App } from "antd"
import { PoweroffOutlined } from "@ant-design/icons"
import { loginOut } from "@/apis/login"
import { useNavigate } from "react-router-dom"
import userInfoStore from "@/store/userInfo/index"
const { Header } = Layout
function HeaderTitle() {
  const { message } = App.useApp()
  const navigate = useNavigate()
  const { updateInfo } = userInfoStore()
  const confirm = async () => {
    const res = await loginOut()
    if (res.code === 200) {
      navigate("/login")
      updateInfo({})
      message.success("退出成功")
    }
  }

  return (
    <Header className="h-60px mb-10px flex items-center justify-between bg-white">
      <section className="i-ei:sc-github text-60px hover:text-red"></section>
      <div>
        <span className="mr-10px">欢迎回来</span>
        <Space>
          <Popconfirm
            onConfirm={confirm}
            placement="rightBottom"
            title="退出登录"
            description="确认退出登录,并返回登录页吗？"
            okText="确定"
            cancelText="取消"
          >
            <PoweroffOutlined />
          </Popconfirm>
        </Space>
      </div>
    </Header>
  )
}
export default HeaderTitle
